<template>
    <div class="box">
            <img :src="item.url[0]" alt="" class="header-img">
            <div class="content">
                   <div class="content-map">
                    <div class="content-map-name">{{ item.name }}</div>
                    <div class="content-map-tag">
                        <span v-for="item in item.label" :key="item">{{ item }} </span>
                    </div>
                  
                   <div class="content-map-footer">
                    <div class="time"><img src="../assets/时间.png" alt=""><span>{{ item.businessHours }}</span></div>
                    <div class="address"><img src="../assets/指缘地点6.png" alt="">{{ item.address }}</div>
                   </div>
            </div>
            <div class="content-text">
                <div class="content-text-title"><span>店铺详情</span></div>
                <div class="centent-text-html" v-html="item.content"></div>
            </div>
             </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import date from "../data";
const route = useRoute()
const id = route.query?.id
const item = date.find(i=> i.id==id)
console.log(id,date,'id');
console.log(item,'item');
</script>
<style scoped lang="scss" >
 .box{
    .header-img{
        width: 100%;
        mask-image: linear-gradient(to bottom,#fff,rgba(255,255,255,0.9),rgba(255,255,255,0));
    }
    .content{
        padding: 9px 16px;
        margin-top: -332px;
        position: relative;


        >div{border-radius: 10px;
            background-color: #fff;
        }

        >div:first-child{
            margin-bottom: 10px;
        }
        .content-map{
            padding: 14px 10px;


            .content.map-name{
                font-size: 20px;
                font-weight: bold;
            }

            .content-map-tag{
                margin-top: 6px;

                span{
                    background-color: #ededed;
                    font-size: 12px;
                    margin-right: 6px;
                }
            }

            .content-map-footer{
                height: 100px;
                background: url("http://wddxwdc.tffcs.com/image/dxkfr/whxd/map.png")no-repeat center/cover;
                padding: 25px 20px;
                margin-top: 10px;


                img{
                    margin-right: 6px;
                }
            }
        }

        .content-text{
            padding: 26px 0;

            .content-text-title{
                display: flex;
                justify-content: center;
                margin-bottom: 20px;


                span{
                    padding: 6px 26px;
                    background: linear-gradient(180deg,#ffedd1 0%,rgba(255,255,255,0)100%);
                    color: #784e23;
                    font-weight: bold;
                    border-radius: 5px;
                }
            }

            :deep(p){
                color: #784e23;
            }
        }
    }
 }
</style>
